<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <meta name="theme-color" content="#ffffff" />
    <meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv=“X-UA-Compatible” content=“IE=Edge”>
    <title>高1.20班同学风采</title>
    <link rel="stylesheet" href="./assets/css/main.css">
    <link href="font.css" rel="stylesheet">
    <link rel="stylesheet" href="./isolde.css">
</head>

<body>
    <header class="header">
        <h1 class="header__title">
      高1.20班<span class="header__title--high">同学风采</span>  
    </h1>
    </header>
    <main class="sortable">
        <div class="container">
            <div class="wrapper">
                <ul class="sortable__nav nav">
                    <li>
                        <a data-isolde-link="all" class="nav__link">全部</a>
                    </li>
                    <li>
                        <a data-isolde-link="1" class="nav__link">男生</a>
                    </li>
                    <li>
                        <a data-isolde-link="2" class="nav__link">女生</a>
                    </li>
                </ul>
                <div id="isolde" class="isolde-default">
                    <div data-isolde-el="1">
                        <div class="card">
                            <img class="card__picture" src="assets/images/120/qiaoke.jpg" alt="">
                            <div class="card-infos">
                                <h2 class="card__title">乔小珂</h2>
                            </div>
                        </div>
                    </div>
                    <div data-isolde-el="1">
                        <div class="card">
                            <img class="card__picture" src="assets/images/120/hanzhijian.jpg" alt="">
                            <div class="card-infos">
                                <h2 class="card__title">韩志坚</h2>
                            </div>
                        </div>
                    </div>
                    <div data-isolde-el="1">
                        <div class="card">
                            <img class="card__picture" src="assets/images/120/zlx.jpg" alt="">
                            <div class="card-infos">
                                <h2 class="card__title">齐行/赵林许</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer class="footer">
        <div class="container">
            <div class="wrapper">
                <ul class="footer__list list">
                    <li class="list__item item">QQ群:89413424</li>

                </ul>
            </div>
        </div>
    </footer>
    <script type="module">
        import isolde from './isolde.js'; const isoldejs = new isolde();
    </script>
    
</body>

</html>
